<script setup lang="ts">
import DriverStrokeCard from "~/components/passenger/DriverStrokeCard.vue";

const route = useRoute()
const id = route.params.id

// let str = ['12', '122']
const inviteList: Ref<StrokePO[]> = ref([])

async function getInviteList(intervalId: any): Promise<boolean> {
  return new Promise(((resolve) => {
        let isSuccess: boolean = false
        cFetch('/stroke/api/invite/list/' + id, {
          auth: true,
          defaultOpts: {
            method: 'POST',
          }
        }).then(res => {
          let t = res as ApiResponse<StrokePO>
          inviteList.value = t.data
          isSuccess = true
        }).catch(err => {
          if (intervalId) clearInterval(intervalId)
          showFailToast('发生错误')
          console.log(err)
        }).finally(function () {
          resolve(isSuccess)
        })
      })
  )

}

let intervalId: any = null
onMounted(async function () {
  let isContinue = await getInviteList(null)
  if (!isContinue) return
  intervalId = setInterval(function () {
    getInviteList(intervalId)
  }, 3000)
})
onUnmounted(function () {
  if (intervalId) {
    clearInterval(intervalId)
  }
})

function answer(status: number, item: StrokePO) {
  cFetch('/stroke/api/invite/accept', {
    auth: true,
    defaultOpts: {
      method: 'POST',
      body: {
        inviteeTripId: id,
        inviterTripId: item.id,
        status: status,
      }
    }
  }).then(res => {
    item.status = status
    if(status===1)
    navigateTo('/stroke')
  }).catch(err => {
    showFailToast('发生错误')
  })
}

</script>

<template>
  <div class="header">
    <h2 style="color:RGB(218,165,32);margin: 12px 0;">收到邀请</h2>
    <p style="margin: 12px 0">您可以点击司机名片，随时与他沟通出行事宜</p>
  </div>

  <div class="content">
    <div v-for="item in inviteList" class="item">
      <DriverStrokeCard
          :id="item.id"
          :user-alias="item.useralias"
          :from="item.startAddr"
          :to="item.endAddr"
          :start-distance='item.startDistance'
          :end-distance='item.endDistance'
          :departure-time="new Date(item.departureTime)"
          :quality='item.quantity'
          :avatar="item.avatar"
          :suitability="null"
      >
        <template #default>
          <div class="action" v-if="item.status===0 ">
            <van-button plain style="height: 35px;" type="success" @click="answer(1,item)">接受</van-button>
            <van-button plain style="height: 35px;" type="default" @click="answer(2,item)">拒绝</van-button>
          </div>
          <p v-else-if="item.status===3" style="color: #657081" class="status-text">
            已超时
          </p>
          <p v-else-if="item.status===2" style="color: #657081" class="status-text">
            已拒绝
          </p>
          <p v-else-if="item.status===1" style="color: green" class="status-text">
            已确认
          </p>
        </template>
      </DriverStrokeCard>
    </div>

  </div>

</template>

<style scoped>
.header {
  background-color: RGB(227, 231, 224);
  padding: 15px;
  position: relative;
  margin-top: 4%;
  border-radius: 10px;
  border: 1px grey solid;
}

.content {
  background-color: RGB(227, 231, 224);
  padding: 15px;
  position: relative;
  margin: 4% 0;
  border-radius: 10px;
  border: 1px grey outset;
  width: 85%;
}

.item {
  border-left: 4px solid #aeaeae;
  margin-bottom: 25px;
  padding-left: 8px;
}

.item:last-child {
  margin-bottom: 0;
}

.action {
  margin-top: 10px;
  display: flex;
  justify-content: space-evenly;
}

.status-text {
  margin: 10px;
  text-align: right;
  position: relative;
}
</style>